<template>
  <div>
    <el-card :body-style="{ padding: '20px' }">
      <el-row type="flex" justify="space-between">
        <div class="map">
          <inCom style="width: 550px; height: 350px;"></inCom>
        </div>
        <div id="lineChart" style="width: 800px;"></div>
      </el-row>
    </el-card>
    <el-card :body-style="{ padding: '20px' }">
      <el-row type="flex" justify="space-between">
        <div id="barChart" style="width: 600px; height: 400px;"></div>
        <div id="radarChart" style="width: 350px; height: 400px;"></div>
        <div id="pieChart" style="width: 350px; height: 400px;"></div>
      </el-row>
    </el-card>
  </div>
</template>

<script setup>
import axios from 'axios'
import inCom from '@/components/inCom/index'
import '../../../mock/dashboaed.js'
import { onMounted } from 'vue'
import * as echarts from 'echarts'

// 基于准备好的dom，初始化echarts实例
onMounted(async () => {
  const { data } = await axios.get(`/province/list`)
  // console.log(data);
  const list1 = data.data.map(item => item.name)
  const list2 = data.data.map(item => item.value)
  // console.log(list1,list2);
  const { data: { data: data2 } } = await axios.get(`/leida/list`)
  console.log(data2.value[0]);

  let myChart1 = echarts.init(document.getElementById('lineChart'))
  myChart1.setOption({
    xAxis: {
      type: 'category',
      data: list1,
      axisLabel: {
        interval: 0, // 设置数据间隔
        // rotate: -98, // 标题倾斜
        // margin: 5, //刻度标签与轴线之间的距离
        // textStyle: {
         fontSize: 10, //横轴字体大小
        //  color: "#000000",//颜色
        // },
      }
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: list2,
        type: 'line'
      }
    ]
  })
  let myChart2 = echarts.init(document.getElementById('barChart'))
  myChart2.setOption({
    xAxis: {
      type: 'category',
      data: list1,
      axisLabel: {
        interval: 0, // 设置数据间隔
        // rotate: -98, // 标题倾斜
        // margin: 5, //刻度标签与轴线之间的距离
        // textStyle: {
         fontSize: 10, //横轴字体大小
        //  color: "#000000",//颜色
        // },
      }
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: list2,
        type: 'bar'
      }
    ]
  })
  let myChart3 = echarts.init(document.getElementById('radarChart'))
  myChart3.setOption({
    title: {
      text: '标题'
    },
    legend: {
      data: ['当前季度', '上季度']
    },
    radar: {
      // shape: 'circle',
      indicator: data2.usersInfo
    },
    series: [
      {
        name: 'Budget vs spending',
        type: 'radar',
        data: [
          {
            value: data2.value[0],
            name: '当前季度'
          },
          {
            value: data2.value[1],
            name: '上季度'
          }
        ]
      }
    ]
  })
  let myChart4 = echarts.init(document.getElementById('pieChart'))
  myChart4.setOption({
    title: {
      text: '标题',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        type: 'pie',
        radius: '50%',
        data: data.data,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  })
})
// 绘制图表
</script>

<style scoped>
.el-card {
  margin-bottom: 10px;
}
</style>